
// 假设你有一个需求，即希望在导入图片时自动调整图片大小，并生成相应的WebP格式图片以优化性能。
// 为了实现这一需求，你可以创建一个自定义Loader来处理图片导入的过程。

// 【1】创建自定义Loader并安装对应依赖
// 创建image-optimizer-loader.js文件，使用imagemin和imagemin-mozjpeg来压缩图片，并使用imagemin-webp来生成WebP格式的图片。

// image-optimizer-loader.js
const imagemin = require('imagemin');
const imageminMozjpeg = require('imagemin-mozjpeg');
const imageminWebp = require('imagemin-webp');

module.exports = function(source) {
    const callback = this.async();

    // 获取文件的原始路径和输出路径
    const inputPath = this.resourcePath;
    const outputPath = this.outputPath;

    // 使用imagemin压缩图片
    imagemin.buffer(source, {
        plugins: [
            imageminMozjpeg({ quality: 75 }), // 使用mozjpeg压缩为JPEG格式
            imageminWebp({ quality: 75 }) // 生成WebP格式的图片
        ]
    })
        .then((output) => {
            // 写入压缩后的图片到输出路径
            this.fs.writeFileSync(outputPath, output);
            callback(null, source); // 返回原始源代码，因为Loader只处理文件内容，不改变import/require的路径
        })
        .catch((err) => {
            callback(err); // 如果出现错误，通过callback传递错误
        });
};